<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市空气质量监测平台</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        nav { background-color: #333; overflow: hidden; }
        nav a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        nav a:hover { background-color: #ddd; color: black; }
        .container { padding: 20px; max-width: 1200px; margin: 0 auto; }
        .hero { text-align: center; padding: 50px 0; background-color: #f8f9fa; }
        .features { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
        .feature-card { flex: 1; min-width: 300px; border: 1px solid #eee; border-radius: 8px; padding: 20px; }
        footer { text-align: center; padding: 20px; background-color: #333; color: white; margin-top: 50px; }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <a href="index.html">首页</a>
        <a href="pages/cities.html">城市列表</a>
        <a href="pages/chart.html">数据可视化</a>
        <a href="pages/login.html" id="userLink">登录</a>
    </nav>

    <!-- 主页内容 -->
    <div class="container">
        <div class="hero">
            <h1>城市空气质量监测平台</h1>
            <p>实时掌握全国主要城市空气质量数据，科学规划生活与出行</p>
            <a href="pages/cities.html" class="btn">查看城市空气质量</a>
        </div>

        <div class="features">
            <div class="feature-card">
                <h3>实时数据</h3>
                <p>获取全国主要城市的实时空气质量指数(AQI)及污染物浓度数据</p>
            </div>
            
            <div class="feature-card">
                <h3>数据可视化</h3>
                <p>通过图表直观展示空气质量变化趋势及污染物分布情况</p>
            </div>
            
            <div class="feature-card">
                <h3>用户反馈</h3>
                <p>提交您所在区域的空气质量反馈，参与数据共建</p>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2024 城市空气质量监测平台 | 数据仅供参考</p>
    </footer>

    <script>
        // 显示当前登录用户（如果已登录）
        const currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser) {
            document.getElementById('userLink').textContent = `欢迎 ${currentUser.username}`;
            document.getElementById('userLink').href = 'pages/login.html';
        }
    </script>
</body>
</html>